//个人基本信息
<template>
  <div>
    <div style="height:125px;width:100%">
      <div id="left" style="width:18%;float:left">
        <el-avatar
          :src="headUrl"
          style="margin:10px 20px 15px 60px;height:100px;width:100px;"
        >
        </el-avatar>
      </div>
      <div id="right" style="width:82%;float:left;padding-top:25px;">
        <span style="font-size:20px;">{{ user.name }}</span>
      </div>
    </div>

    <el-dialog
      :visible.sync="isShow">
        <Modify/>
      </el-dialog>

    <div>
      <el-col>
        <span style="font-family:'黑体';font-size:25px;font-weight:bold;">
          基本信息
        </span>
      </el-col>
      <el-row>
        <el-card shadow="never">
          <el-row>
            <el-col>
              <el-row :gutter="12" style="margin-top:20px;">
                <el-col :span="3">
                  <div class="text"><span>姓名</span></div>
                </el-col>
                <el-col :span="16">{{ user.name }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>学号</span></div>
                </el-col>
                <el-col :span="16">{{ user.code }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>性别</span></div>
                </el-col>
                <el-col :span="16">{{
                  user.gender === 0 ? "男" : "女"
                }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>学院</span></div>
                </el-col>
                <el-col :span="16">{{ user.college }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>班级</span></div>
                </el-col>
                <el-col :span="16">{{ user.className }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>生日</span></div>
                </el-col>
                <el-col :span="16">{{ user.birth | formatDate }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>邮箱</span></div>
                </el-col>
                <el-col :span="16">{{ user.mail }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>电话</span></div>
                </el-col>
                <el-col :span="16">{{ user.tel==null ?  '无':user.tel }}</el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>角色名</span></div>
                </el-col>
                <el-col :span="16">
                  <span v-if="user.roleId==0">超级管理员</span>
                  <span v-if="user.roleId==1">管理员</span>
                  <span v-if="user.roleId==2">工作人员</span>
                  <span v-if="user.roleId==3">普通用户</span>
                </el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:30px;">
                <el-col :span="3">
                  <div class="text"><span>创建时间</span></div>
                </el-col>
                <el-col :span="16">{{ user.createDate | formatDate }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>
<!--    修改信息的按钮-->
    <div>
      <br>
      <br>
    <el-row >
      <el-button type="primary" round @click="jump">修改个人信息</el-button>
    </el-row>
    </div>


  </div>
</template>

<script>
import { mapMutations } from "vuex";
import userApi from "../../../api/user";
import Modify from "../Modify";

export default {
  components: {
    Modify,
  },
  data() {
    return {
      gender: "男",
      user: {},
      headUrl: null,
      isShow: false
        // "http://sywxr.online:8080/static/2a074424-94c5-4bfb-9d45-926545f2cdb4_微信图片_20210405161802.jpg",
    };
  },
   filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '年' + MM + '月' + d + '日' ;
      }
    },
  methods: {
    ...mapMutations(["activeIndexUpdate", "navmenuIndexUpdate"]),
    jump () {
      this.$router.push("/info/personal/modify")
    }
  },
  async mounted() {
    this.activeIndexUpdate("/info/personal");
    this.navmenuIndexUpdate("/info/personal/information");
    const sy = await userApi.userinfo()
    this.user = sy.data;
    this.user_modify = sy.data
    if (this.user.gender===0){
      this.gender = "男"
    }else{
      this.gender = "女"
    }
    this.headUrl = this.user.iconPath;
    console.log(sy.data);
  }
};

</script>

<style scoped>
.text {
  text-align: justify;
  text-align-last: justify;
  padding-right: 23px;
  padding-left: 40px;
}
</style>
